<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单三联动</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100%;
        }
        input{
            margin-right: 30px;
        }
        div{
            position: absolute;
            margin-top: 30px;
            width: 400px;
            height: auto;
        }
        #company{
            display: none;
        }
        #company input{
            height: 24px;
            width: 200px;
        }
    </style>
</head>
<body>
    <form>
        <label for="in">在校生</label>　<input type="radio" id="in"name="student"checked="checked"/>
        <label for="out">非在校生</label>　<input type="radio"id="out"name="student"/>
    </form>
        <div id="school">
            <label>学校</label>
            <select id="address">
                <option value="Beijin">北京</option>
                <option value="ChengDu">成都</option>
                <option value="Shanghai">上海</option>
            </select>
            <select id="university">
                <option>北京清华大学</option>
                <option>北京大学</option>
            </select>
        </div>
        <div id="company">
            <label>就业单位</label>
            <input type="text"/>
        </div>

<script>

    function Change() {
        var address=document.getElementsByTagName("select")[0];
        var school=document.getElementById("university").getElementsByTagName("option");
        var index=address.selectedIndex;
        if(index==0)
        {
            school[0].innerHTML="北京清华大学";
            school[1].innerHTML="北京大学";
        }
        if(index==1)
        {
            school[0].innerHTML="成都电子科技大学";
            school[1].innerHTML="成都东软学院";
        }
        if(index==2)
        {
            school[0].innerHTML="上海复旦大学";
            school[1].innerHTML="上海工商大学";
        }
    }
    document.getElementById("address").addEventListener('change',Change);
    document.getElementById("in").onclick=function () {
        document.getElementById("company").style.display="none";
        document.getElementById("school").style.display="block";
    };
    document.getElementById("out").onclick=function () {
        document.getElementById("company").style.display="block";
        document.getElementById("school").style.display="none";
    };
</script>
</body>
</html>